<template>
  <div class="adminNews">
    <div class="adminMsg">
      <div class="top">
        <h2>资讯管理</h2>
        <el-button class="btnHouse" size="small" @click="dialogFormPush=true">发布新资讯</el-button>
      </div>
      <div class="title block">
        <span>标题</span>
        <span>时间
          <el-button class="btn" @click="newOrder(valueCode=1)">⇃</el-button>
          <el-button class="btn" @click="newOrder(valueCode=2)">↾</el-button>
        </span>
        <span>操作</span>
      </div>
      <div v-for="item in currentList" :key="item.id">
        <div class="info block">
          <div class="msg">
            <p style="font-weight: 800;color: #001529">{{ item.title }}</p>
            <p>{{ item.content }}</p>
          </div>
          <div class="msg1">
            <p>{{ item.createTime }}</p>
          </div>
          <div class="btn1">
            <el-button size="small" type="primary" @click="edit(item)">编辑</el-button>
            <el-button size="small" type="danger" @click="remove(item.id)">删除</el-button>
          </div>
        </div>
      </div>
      <div class="Page">
        <el-pagination :current-page.sync="pageNum"
                       :page-size="pageSize"
                       :page-sizes="[3, 5, 7, 9, 20]"
                       :total="allList.length"
                       layout="total, sizes, prev, pager, next"
                       @current-change="handlePage"
                       @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
      <!-- 编辑消息资讯弹窗 -->
      <el-dialog :before-close="handleCloseEdit" :visible.sync="dialogFormEdit" title="编辑资讯消息" width="35%">
        <el-form ref="newsForm" :model="editForm" :rules="rules">
          <el-form-item :label-width="'80px'" label="标题" prop="title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item :label-width="'80px'" label="内容" prop="content">
            <el-input v-model="editForm.content" :rows="3" placeholder="请输入内容" type="textarea">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCloseEdit">取 消</el-button>
          <el-button type="primary" @click="newsEdit(editForm.id)">确 认</el-button>
        </div>
      </el-dialog>
      <!-- 发布消息资讯弹窗 -->
      <el-dialog :before-close="handleClosePush" :visible.sync="dialogFormPush" title="发布资讯消息" width="35%">
        <el-form ref="newsForm" :model="pushForm" :rules="rules">
          <el-form-item :label-width="'80px'" label="标题" prop="title">
            <el-input v-model="pushForm.title"></el-input>
          </el-form-item>
          <el-form-item :label-width="'80px'" label="内容" prop="content">
            <el-input v-model="pushForm.content" :rows="3" placeholder="请输入内容" type="textarea">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClosePush">取 消</el-button>
          <el-button type="primary" @click="newsPush">发 布</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'adminNews',

  created() {
    this.handlePage(1);
    this.getNewsList()

  },
  data() {
    return {
      //当前页
      pageNum: 1,
      pageSize: 5,
      currentList:[],
      //发布消息资讯弹窗
      dialogFormEdit: false,
      dialogFormPush: false,
      editForm: {
        title: '',
        content: '',
      },
      pushForm:{
        title: '',
        content: '',
      },
      //消息列表
      allList: [],
      list: [],
      houses: [],
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
        ],
        houseId: [
          { required: true, message: '请选择房源', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {

    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1; // 重置到第一页
      this.handlePage(1,size)
    },

    handlePage(page) {
      this.pageNum = page;
      const start = (page - 1) * this.pageSize;
      const end = page * this.pageSize;
      this.currentList = this.allList.slice(start, end);
    },

    //资讯排序（时间排序)
    newOrder(val) {
      axios({
        url: "http://localhost:8090/news/order",
        method: 'post',
        data: {
          value: val
        }
      }).then(res => {
        if (res.code === '200') {
          this.allList = res.data
          this.handlePage(1);
        }
      })
    },

    //获取新闻列表
    getNewsList() {
      axios.get("http://localhost:8090/news/list").then(res => {
        if (res.code === '200') {
          this.allList = res.data
          this.handlePage(1);
        }
      })
    },

    //编辑资讯信息
    newsEdit() {
      axios({
        url:"http://localhost:8090/news/edit",
        method: 'put',
        data: this.editForm
      }).then(res => {
        if (res.code === '200'){
          this.dialogFormEdit = false
          this.$message.success('资讯修改成功！')
          this.getNewsList()
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    //发布消息
    newsPush() {
      axios({
        url:"http://localhost:8090/news/push",
        method: 'post',
        data: this.pushForm
      }).then(res => {
        if (res.code === '200'){
          this.dialogFormPush = false
          this.pushForm  = {}
          this.$message.success('资讯新增成功！')
          this.getNewsList()
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    //删除消息
    remove(id) {
      this.$confirm('此操作将永久删除该订单信息, 是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      axios({
        url:'/news/remove',
        method: 'delete',
        params: {
          id: id
        }
      }).then(res => {
        if (res.code === '200'){
          this.$message.success("删除成功！")
          this.getNewsList()
        }else {
          this.$message.error(res.msg)
        }
      })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //编辑消息弹窗
    edit(val) {
      //console.log("当前信息是：",val)
      this.editForm = {
        id: val.id,
        title: val.title,
        content: val.content,
      }
      this.dialogFormEdit = true
    },

    //编辑弹窗关闭
    handleCloseEdit(){
      this.$refs['newsForm'].resetFields();
      this.editForm = {
        title: '',
        content: '',
        houseid: ''
      },

      this.dialogFormEdit = false

    },

    //发布弹窗关闭
    handleClosePush() {
      this.$refs['newsForm'].resetFields();
      this.pushForm = {
        title: '',
        content: '',
      },
      this.dialogFormPush = false
    },

  }
}
</script>

<style scoped>
.adminNews {
  width: 1100px;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.adminMsg {
  width: 1155px;
  background-color: #fff;
  border-radius: 15px;
  padding: 20px 90px 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.adminMsg h2 {
  font-size: 20px;
  font-weight: 600;
}

.top {
  display: flex;
  align-items: center;
}

.btn{
  background-color: #4a5eff;
  color: white;
  border: none;
  padding: 5px;
}

.btnHouse {
  background-color: #4a5eff;
  border: none;
  color: white;
  margin-left: 20px;
}

.Page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.block {
  display: block;
  display: flex;
  align-items: center;
  width: 1195px;
}

.block> :first-child {
  flex: 3;
}

.block> :nth-child(n+2) {
  flex: 1;
  text-align: center;
}

.title {
  height: 50px;
  background-color: #4b5fff;
  color: white;
  padding-left: 20px;
  margin-top: 20px;
}

.info {
  height: 110px;
  padding: 30px 15px;
  border-bottom: 2px solid #eee;
}

.info .msg {
  color: #777;
  line-height: 30px;
  margin-left: 20px;
  height: 100px;
}
.info .msg1 {
  color: #777;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 30px;
}
.info .btn1 {
  color: #777;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 30px;
}
.formOption {
  display: flex;
  align-items: center;
  height: 100px;
  width: 552px;
  padding: 0 10px
}

.formImage {
  width: 100px;
  height: 80px;
  margin-right: 10px;
  margin-left: 5px;
}
</style>